import * as React from 'react';
import {observer} from 'mobx-react';
import {toJS} from 'mobx';
import _ from 'lodash';
import {Modal, Row, Col, Form, Input, Select, DatePicker} from 'antd';
import * as moment from 'moment';
import {SelectItem} from '../../../../component/select/Select';
import {InputItem} from '../../../../component/input/Input';
import {InputNumberItem} from '../../../../component/inputNumber/InputNumber';
import {UeditorList} from '../../../../component/myUeditor/MyUeditor';
import {UploadItem} from '../components/upload/Upload';
import {AreaTree} from '../components/areaTree/AreaTree';
import {AdBaseFormStore, areaTreeStore} from '../AdStore';

const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

@observer
export class AdBaseFormModal extends React.Component<{ store: AdBaseFormStore, title: string, onOk }, any> {

    render() {
        return (
            <Modal
                maskClosable={false}
                title={this.props.title}
                onOk={this.ok(this)}
                onCancel={() => {
                    this.props.store.hide()
                }}
                width="900"
                visible={this.props.store.visible}
                confirmLoading={this.props.store.confirmLoading}>
                <AdBaseForm store={this.props.store}/>
            </Modal>
        )
    }

    ok(me) {
        return function () {
            me.props.onOk(me);
        }
    }

    cancel(me) {
        return function () {
            me.props.onCancel(me);
        }
    }
}

@observer
export class AdBaseForm extends React.Component<{ store: AdBaseFormStore }, any> {
    dateFormat = 'YYYY-MM-DD HH:mm:ss';

    // onChangeBu(me){
    //     return function(value){
    //         let store: AdBaseFormStore = me.props.store;
    //         store.valid('businessUnitId',value,!store.fields.businessUnitId.required);
    //         store.selectBu();
    //     }
    // }
    // onChangeApp(me){
    //     return function(value){
    //         let store: AdBaseFormStore = me.props.store;
    //         store.valid('appId',value,!store.fields.appId.required);
    //         store.selectApp();
    //     }
    // }
    // onChangePlatForm(me){
    //     return function(value){
    //         let store: AdBaseFormStore = me.props.store;
    //         store.valid('platform',value,!store.fields.platform.required);
    //         store.selectPlatForm();
    //     }
    // }
    // onChangePage(me){
    //     return function(value){
    //         let store: AdBaseFormStore = me.props.store;
    //         store.valid('page',value,!store.fields.page.required);
    //         store.selectPage();
    //     }
    // }
    onChangeMediaType(me) {
        return function (value) {
            let store: AdBaseFormStore = me.props.store;
            store.valid('mediaType', value, !store.fields.mediaType.required);
            store.selectmediatype(value);
        }
    }

    onRangePickerChange(me) {
        return function (dateArr) {
            let store: AdBaseFormStore = me.props.store;
            let time, beginDate, endDate;

            if (!!dateArr && dateArr.length > 0) {
                time = dateArr;
                beginDate = dateArr[0].format(me.dateFormat);
                endDate = dateArr[1].format(me.dateFormat);
            } else {
                time = null;
                beginDate = null;
                endDate = null;
            }

            store.changeFields({
                beginDate: {value: beginDate},
                endDate: {value: endDate}
            });

            store.valid('time', time, !store.fields.time.required);
        }
    }

    onChangeAdTreeSelect = (value, info) => {
        let store: AdBaseFormStore = this.props.store;
        store.valid('areaIds', value, !store.fields.areaIds.required);

        store.fields.filterAreaIds.value = info.checkedNodes ? info.checkedNodes : [];
    }

    onChangeUeditor(me) {
        return function (value) {
            let store: AdBaseFormStore = me.props.store;
            store.valid('richText', value, !store.fields.richText.required);
        }
    }

    onChangeTags = (value) => {
        this.props.store.valid('tags', value);
    }

    render() {
        const store: AdBaseFormStore = this.props.store;

        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18}
        }

        return (
            <div style={{width: 850}}>
                {/*<Row type="flex">
                    <Col span={12}>
                        <SelectItem mykey="businessUnitId" 
                            title="业务" 
                            {...formItemLayout}
                            store={store} 
                            onChange={this.onChangeBu(this)}/>
                    </Col>
                    <Col span={12}>
                        <SelectItem mykey="appId" 
                            title="应用名称"
                            {...formItemLayout}
                            store={store} 
                            onChange={this.onChangeApp(this)}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <SelectItem mykey="platform" 
                            title="平台"
                            optionKey = 'type'
                            optionValue = 'title'
                            {...formItemLayout}
                            store={store} 
                            onChange={this.onChangePlatForm(this)}/>          
                    </Col>
                    <Col span={12}>
                        <SelectItem mykey="page" 
                            title="页面"
                            {...formItemLayout}
                            store={store} 
                            onChange={this.onChangePage(this)}/> 
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <SelectItem mykey="position" 
                            title="广告位"
                            {...formItemLayout}
                            store={store} 
                            onChange={this.onChangePosition(this)}/>  
                    </Col>
                </Row>
                <Row type = "flex">
                    <Col span={23} offset={1} style={{
                        borderBottom:'1px solid #ddd',
                        marginBottom: '20px'}}>
                    </Col>
                </Row>*/}
                <Row type="flex">
                    <Col span={12}>
                        <FormItem className="time"
                                  {...formItemLayout}
                                  label="起止时间:"
                                  hasFeedback={store.fields.time.hasFeedback}
                                  required={store.fields.time.required}
                                  help={store.fields.time.help}
                                  validateStatus={store.fields.time.validateStatus}>
                            <RangePicker style={{width: '100%'}}
                                         value={toJS(store.fields.time.value)}
                                         format={this.dateFormat}
                                         showTime
                                         onChange={this.onRangePickerChange(this)}/>
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <InputNumberItem myKey="orders"
                                         {...formItemLayout}
                                         title="排序"
                                         store={store}
                                         max={100}
                                         min={-Infinity}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <SelectItem mykey="mediaType"
                                    title="类型"
                                    optionKey='type'
                                    optionValue='name'
                                    {...formItemLayout}
                                    store={store}
                                    onChange={this.onChangeMediaType(this)}/>
                    </Col>
                    <Col span={12}>
                        <InputItem myKey="title"
                                   {...formItemLayout}
                                   title="标题"
                                   store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <UploadItem filedName="imageUrl"
                                    style={{display: (_.toString(store.fields.mediaType.value) === '0') ? 'block' : 'none'}}
                                    label="路径"
                                    labelCol={{span: 3}}
                                    wrapperCol={{span: 21}}
                                    store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem myKey="contentTypeUrl"
                                   style={{display: (_.toString(store.fields.mediaType.value) === '1') ? 'block' : 'none'}}
                                   labelCol={{span: 3}}
                                   wrapperCol={{span: 21}}
                                   title="外部图片"
                                   store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <FormItem label="内容:"
                                  style={{display: (_.toString(store.fields.mediaType.value) === '2') ? 'block' : 'none'}}
                                  labelCol={{span: 3}}
                                  wrapperCol={{span: 21}}
                                  hasFeedback={store.fields.richText.hasFeedback}
                                  required={store.fields.richText.required}
                                  help={store.fields.richText.help}
                                  validateStatus={store.fields.richText.validateStatus}>
                            <UeditorList content={store.fields.richText.value}
                                         visible={_.toString(store.fields.mediaType.value) === '2'}
                                         height="200"
                                         disabled={false}
                                         onChange={this.onChangeUeditor(this)}/>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem myKey="text"
                                   type='textarea'
                                   autosize={{minRows: 3, maxRows: 3}}
                                   style={{display: (_.toString(store.fields.mediaType.value) === '3') ? 'block' : 'none'}}
                                   labelCol={{span: 3}}
                                   wrapperCol={{span: 21}}
                                   title="文本"
                                   store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem myKey="url"
                                   labelCol={{span: 3}}
                                   wrapperCol={{span: 21}}
                                   title="链接地址"
                                   store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <SelectItem mykey="tags"
                                    title="标签"
                                    filterOption={this.filterTags}
                                    optionKey='id'
                                    optionValue='name'
                                    multiple={true}
                                    labelCol={{span: 3}}
                                    wrapperCol={{span: 21}}
                                    store={store}
                                    onChange={this.onChangeTags}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <AreaTree label="广告区域:"
                                  filedName="areaIds"
                                  labelCol={{span: 3}}
                                  wrapperCol={{span: 21}}
                                  store={store}
                                  treeData={areaTreeStore.treeData}
                                  onChange={this.onChangeAdTreeSelect}/>
                    </Col>
                </Row>
            </div>
        )
    }

    filterTags = (value, obj) => {
        return obj.props.children.indexOf(value) >= 0;
    }
}